<template>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
        <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
      </linearGradient>
    </defs>
    <g>
      <component v-for="(item,i) in config" :key="i" :is="item.tag" v-bind="item['props']" style="fill:url(#orange_red)">
        {{!!item['inner']?item['inner']:''}}
        <animateMotion v-if="!!motion" :path="motion.path" :dur="`${motion.dur}s`" repeatCount = "indefinite"></animateMotion>
      </component>
    </g>

  </svg>
</template>

<script>
export default {
  name: "iconSvg",
  props:{
    motion:{
      default:()=> {
        return null
      }
    },
    config:{
      default:()=>{
        return [
          /*
          {
            tag:'circle',
            props:{
              cx:"100",
              cy:"50",
              r:"40",
              stroke:"black",
              'stroke-width':"2",
              fill:"red"
            }
          }
           */
        ]
      }
    }
  }
}
</script>

<style scoped>

</style>